<!-- 用户评价 组件 -->
<template>
	<view class="max-box" :style="{ backgroundColor: bgc }">
		<!-- tabs 导航栏 -->
		<u-sticky :enable="isSticky">
			<view class="tabs-box" v-if="isShowTabs">
				<block v-for="(item, i) in tabs" :key="item.id">
					<view class="item" :class="[activeIndex === i ? 'active' : '']" @click="tabItemClick(i)">{{ item.title }}({{ item.number }})</view>
				</block>
			</view>
		</u-sticky>
		<!-- 评价项 -->
		<view v-if="isDataListNull" :style="{ paddingTop: nullIconMT + 'rpx' }"><u-empty text="暂无数据记录" mode="list"></u-empty></view>
		<block v-else>
			<view class="star-item-box" v-for="item in list" :key="item.id">
				<view class="top">
					<view class="avatar-box"><u-avatar :src="vuex_root + item.avatar" mode="circle" size="80"></u-avatar></view>
					<view class="datas">
						<view class="name-and-time">
							<view class="name">{{ item.nick_name || '匿名用户' }}</view>
							<view>{{ item.create_time || '' }}</view>
						</view>
						<view class="star">
							<u-rate
								:count="5"
								:value="item.total_star"
								active-color="#FA7D00"
								inactive-color="#CBCBCB"
								:disabled="true"
								inactive-icon="star-fill"
								size="22"
							></u-rate>
							<view class="tip">{{ $u.utils.getStarTip(item.comment_type) }}</view>
						</view>
					</view>
				</view>
				<!-- 评价的内容 -->
				<view class="content">{{ item.comment || '' }}</view>
				<view class="serv-stars">
					<view class="u-m-r-42">服务技能：{{ item.skill_star }}星</view>
					<view>服务态度：{{ item.attitude_star }}星</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
export default {
	name: 'my-star',
	props: {
		// 传进来的评价数据列表
		list: {
			type: Array,
			default() {
				return [];
			}
		},
		// 数据为空的 icon 距离 tabs 的距离，默认 350 rpx
		nullIconMT: {
			type: [Number, String],
			default: 350
		},
		// tab栏的四个数据量的数组，如[20, 10, 5, 5]
		tabsNums: {
			type: Array,
			default() {
				return [];
			}
		},
		// 是否显示tab栏
		isShowTabs: {
			type: Boolean,
			default: true
		},
		// 是否开启 tab 栏的吸顶效果
		isSticky: {
			type: Boolean,
			default: false
		},
		bgc: {
			type: String,
			default: '#FFFFFF'
		}
	},
	data() {
		return {
			activeIndex: 0,
			tabs: [
				{
					id: 1,
					title: '全部',
					number: 0
				},
				{
					id: 2,
					title: '好评',
					number: 0
				},
				{
					id: 3,
					title: '中评',
					number: 0
				},
				{
					id: 4,
					title: '差评',
					number: 0
				}
			],
			isDataListNull: false
		};
	},
	mounted() {
		// 判断是否内容为空了
		if (this.list.length < 1) return (this.isDataListNull = true);
		this.isDataListNull = false;
	},
	watch: {
		tabsNums(numList) {
			for (let i = 0; i < 4; i++) {
				this.tabs[i].number = numList[i] || 0;
			}
		},
		// 监听页面数据列表发生变动的事件
		list(list) {
			// 判断是否内容为空了
			if (list.length < 1) return (this.isDataListNull = true);
			this.isDataListNull = false;
		}
	},
	methods: {
		// tab 栏切换事件
		tabItemClick(index) {
			this.activeIndex = index;
			this.$emit('tabsChange', index);
		}
	}
};
</script>

<style lang="scss" scoped>
.max-box {
	width: 750rpx;
	.tabs-box {
		width: 100%;
		height: 108rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: white;
		padding: 0 24rpx;
		.item {
			width: 147rpx;
			height: 54rpx;
			line-height: 54rpx;
			text-align: center;
			background: $bgc;
			border-radius: 6rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
		}
		.active {
			background: $color;
			color: white;
		}
	}
	.star-item-box {
		width: 750rpx;
		min-height: 279rpx;
		background: #ffffff;
		border-bottom: 10rpx solid $bgc;
		padding: 21rpx 24rpx 27rpx;
		.top {
			width: 100%;
			height: 80rpx;
			display: flex;
			align-items: center;
			.avatar-box {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				background-color: #32c0c5;
			}
			.datas {
				padding-left: 21rpx;
				width: calc(100% - 80rpx);
				.name-and-time {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #97979f;
					.name {
						font-size: 32rpx;
						color: #000000;
					}
				}
				.star {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #5f5f6b;
					.tip {
						margin-left: 19rpx;
					}
				}
			}
		}
		.content {
			width: 100%;
			padding: 29rpx 0rpx 32rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #5f5f6b;
			line-height: 41rpx;
		}
		.serv-stars {
			width: 100%;
			display: flex;
			align-items: center;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #5f5f6b;
		}
	}
}
</style>
